<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.js"></script>
    <script>


        // Velocity.js：一个快速的JavaScript动画库，可以创建高性能的动画效果。

        // https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.js
        // 1-引入 以后提供了一个 全局变量 Velocity
        console.log(Velocity);

        // steam++ 加速 加速 github

        // 第一个参数 dom对象
        // 第二个参数  对象 -  元素做动画的 属性 ---字符串
        // -控制动画相关的 属性
        // --动画的执行时间 duration
        // --complete 动画完成的回调函数
        Velocity(box, {
            width: "500px",
            left: 200,
            top: 50,
            opacity: 0.7
        }, {
            duration: 2000,
            complete: function () {
                console.log('动画结束的 回调函数');
            }
        });


        // box.velocity({
        //     width: "500px",
        //     left: 200,
        //     top: 50,
        //     opacity: 0.7
        // }, {
        //     duration: 2000,
        //     complete: function () {
        //         console.log('动画结束的 回调函数');
        //         box.velocity({
        //             height: 200,

        //         }, {
        //             duration: 2000,
        //             complete: function () {
        //                 console.log('动画结束的 回调函数');
        //             }
        //         });
        //     }
        // });





    </script>

    <span id="element"></span>

    <!-- Load library from the CDN -->
    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

</body>

</body>

</html>